<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 门店月目标
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-input v-model="query.FilterPara" placeholder="门店编号或名称模糊筛选" class="handle-input mr10"></el-input>

                <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
                <el-button type="primary" icon="el-icon-plus" @click="handleCreate">新建</el-button>
            </div>
            <el-table :data="tableData" border class="table" header-cell-class-name="table-header" v-loading="listLoading">
                <el-table-column prop="FMTFID" label="FMTFID" v-if="false"></el-table-column>
                <el-table-column prop="FNo" label="门店编号"></el-table-column>
                <el-table-column prop="FName" label="门店名称"></el-table-column>
                <el-table-column prop="FYearMonth" label="年-月"></el-table-column>
                <el-table-column prop="FBanZuJiaTarget" label="班组甲目标"></el-table-column>
                <el-table-column prop="FBanZuYiTarget" label="班组乙目标"></el-table-column>
                <el-table-column prop="FTotalTarget" label="总目标"></el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            icon="el-icon-edit"
                            @click="handleEdit(scope.$index, scope.row)"
                        >编辑</el-button>
                         <el-button 
                                type="text"
                                icon="el-icon-delete"
                                class="red" @click="handleDelete(scope.$index, scope.row)"
                            >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page="query.FPageIndex"
                    :page-size="query.FPageSize"
                    :total="pageTotal"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>

        <!-- 编辑弹出框 -->
        <el-dialog :title="showDialogTitle" :visible.sync="editVisible" width="30%">
            <el-form ref="form" :model="form" label-width="100px"  :rules="rules">
                <el-form-item label="FMTFID" prop="FMTFID" v-if="false">
                    <el-input v-model="form.FMTFID" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="门店" prop="FMTShop">
                    <el-select v-model="form.FMTShop" filterable placeholder="请选择">
                        <el-option v-for="item in shops" :key="item.FNo" :label="item.FName" :value="item.FNo">
                            <span style="float: left">{{ item.FName }}</span>
                            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.FNo }}</span>
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="年-月" prop="FYearMonth">
                    <el-date-picker v-model="form.FYearMonth" type="month" placeholder="选择月"></el-date-picker>
                </el-form-item>
                <el-form-item label="班组甲目标" prop="FBanZuJiaTarget">
                    <el-input type="number" v-model="form.FBanZuJiaTarget"></el-input>
                </el-form-item>
                <el-form-item label="班组乙目标" prop="FBanZuYiTarget">
                    <el-input type="number" v-model="form.FBanZuYiTarget"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { fetchDataFromApi } from  '../../api/apiService'
export default {
    name: 'basetable',
    data() {
        return {
            shops:[],
            query: {
                FilterPara: '',
                FPageIndex: 1,
                FPageSize: 10
            },
            tableData: [],
            editVisible: false,
            pageTotal: 0,
            showDialogTitle:'',
            disableNo:false,
            form: {
                FMTFID:'',
                FMTShop:'',
                FYearMonth:'',
                FBanZuJiaTarget:0,
                FBanZuYiTarget:0
            },
            rules: 
            {
                FMTShop: [{ required: true, message: '请选择门店', trigger: 'blur' }],
                FYearMonth: [{ required: true, message: '请选择年月', trigger: 'blur' }],
                FBanZuJiaTarget: [{ required: true, message: '请输入班组甲目标', trigger: 'blur' }],
                FBanZuYiTarget: [{ required: true, message: '请输入班组乙目标', trigger: 'blur' }]
            },
            listLoading:false
        };
    },
    created() {
        this.getShopList();
        this.getData();
    },
    methods: {
        getShopList(){
            var querypars = {};
            querypars.ActionCode = "SearchShop";
            querypars.Token = localStorage.getItem('ms_token');
            querypars.FPageIndex = 1;
            querypars.FPageSize = 5000;
            fetchDataFromApi(querypars).then(res => {

                if(res != undefined && res != null && res != "")
                {
                    this.shops = res.data.items;
                }
            });
        },
        getData() {
            this.listLoading = true;
            this.query.ActionCode = "SearchShop";
            this.query.Token = localStorage.getItem('ms_token');
            fetchDataFromApi(this.query).then(res => {

                if(res != undefined && res != null && res != "")
                {
                    this.tableData = res.data.items;
                    this.pageTotal = res.data.total;
                }

                this.listLoading = false;
            });
        },
        // 触发搜索按钮
        handleSearch() {
            this.$set(this.query, 'FPageIndex', 1);
            //this.query.FPageIndex = 1;
            this.getData();
        },
        // 触发新增按钮
        handleCreate(){
            this.showDialogTitle = "新建门店月目标";
            this.form.FMTFID = '';
            this.form.FMTShop = '';
            this.form.FYearMonth = '';
            this.form.FBanZuJiaTarget = 0;
            this.form.FBanZuYiTarget = 0;
            this.editVisible = true;
        },
        // 删除操作
        handleDelete(index, row) {
            // 二次确认删除
            this.$confirm('确定要删除吗？', '提示', {type: 'warning'
            }).then(() => {
                
                if(row != undefined && row != null && row != "")
                {
                    var myRowShopFID = row.FID;
                    
                    var querypars = {};
                    querypars.ActionCode = "DeleteShop";
                    querypars.Token = localStorage.getItem('ms_token');
                    querypars.FID = myRowShopFID;

                    fetchDataFromApi(querypars).then(res => {

                        if(res != undefined && res != null && res != "")
                        {
                            if(res.Message == "OK")
                            {
                                this.$message.success(res.Info);
                                this.getData();
                            }
                            else
                            {
                                this.$message.error(res.Info);
                            }
                        }
                    });
                }
            }).catch(() => {});
        },
        // 编辑操作
        handleEdit(index, row) {
            this.showDialogTitle = "编辑门店月目标";
            this.form.FMTFID = row.FMTFID;
            this.form.FMTShop = row.FShopNo;
            this.form.FYearMonth = row.FYearMonth;
            this.form.FBanZuJiaTarget = row.FBanZuJiaTarget;
            this.form.FBanZuYiTarget = row.FBanZuYiTarget;
            this.editVisible = true;
        },
        // 保存编辑
        saveEdit() {

            // alert(this.form.FYearMonth);

            this.$refs.form.validate(valid => {
                if(valid)
                {
                    if(this.form.FMTFID == undefined || this.form.FMTFID == null || this.form.FMTFID == "")
                        this.form.ActionCode = "AddShopMonthTarget";
                    else
                        this.form.ActionCode = "UpdateShop";

                    this.form.Token = localStorage.getItem('ms_token');
                    // this.form.FUserNo = localStorage.getItem('ms_userno');

                    fetchDataFromApi(this.form).then(res => {

                        if(res != undefined && res != null && res != "")
                        {
                            if(res.Message == "OK")
                            {
                                this.$message.success(res.Info);
                                this.getData();
                            }
                            else
                            {
                                this.$message.error(res.Info);
                            }
                        }

                        this.editVisible = false;
                    });
                }
            });
        },
        // 分页导航
        handlePageChange(val) {
            this.$set(this.query, 'FPageIndex', val);
            this.getData();
        }
    }
};
</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .table {
        width: 100%;
        font-size: 14px;
    }
    .red {
        color: #ff0000;
    }
    .mr10 {
        margin-right: 10px;
    }
    .table-td-thumb {
        display: block;
        margin: auto;
        width: 40px;
        height: 40px;
    }
</style>
